<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" style="background-color: transparent;">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta id="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, user-scalable=no"
        name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style>
        .img-list {
            padding-top: 50px
        }

        .img-list dd {
            background: url() no-repeat center center;
            background-size: cover;
            width: 200px;
            height: 300px;
            position: relative;
            float: left;
            margin-right: 10px
        }

        .img-list .flipping {
            background: url() no-repeat center center;
            background-size: cover;
            width: 200px;
            height: 300px;
            position: relative;
            opacity: 0;
            transform: scale(0.5) rotate(-360deg);
            -webkit-transform: scale(0.5) rotate(-360deg);
            -moz-transform: scale(0.5) rotate(-360deg);
            transform-origin: center center;
            -moz-transform-origin: center center;
            -webkit-transform-origin: center center;
            -moz-transition: all 0.4s;
            /* Firefox 4 */
            transition: all 0.4s;
            -webkit-transition: all 0.4s;
            /* Safari and Chrome */
            -o-transition: all 0.4s;
            /* Opera */

        }

        .img-list .animate {
            opacity: 1;
            transform: scale(1.2) rotate(0deg);
            -webkit-transform: scale(1.2) rotate(0deg);
            -moz-transform: scale(1.2) rotate(0deg);
        }
    </style>
</head>

<body>


    <article>
        <div class="img-list">
            <dd style="background-image: url('http://haizitong.com/image/banner1.jpg')">
                <div class="flipping" style="background-image: url('http://haizitong.com/image/gqbanner.png')">
                </div>
            </dd>
            <dd style="background-image: url('http://haizitong.com/image/banner1.jpg')">
                <div class="flipping" style="background-image: url('http://haizitong.com/image/gqbanner.png')">
                </div>
            </dd>
            <dd style="background-image: url('http://haizitong.com/image/banner1.jpg')">
                <div class="flipping" style="background-image: url('http://haizitong.com/image/gqbanner.png')">
                </div>
            </dd>
            <dd style="background-image: url('http://haizitong.com/image/banner1.jpg')">
                <div class="flipping" style="background-image: url('http://haizitong.com/image/gqbanner.png')">
                </div>
            </dd>
        </div>


        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            $(".img-list dd").click(function () {
                $(this).find(".flipping").toggleClass("animate")
            })
        </script>


    </article>


    <script>

    </script>
    <script type="text/javascript">

    </script>

</body>

</html>